<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="refresh" content="60"> -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>苏小妹</title>
		<link rel="stylesheet" href="../../css/simple-line-icons.css">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/mui-ext.css">
		<style>
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 3px;
				background-color: #fafafa;
			}
			
			.msg-item {
				padding: 8px;
				clear: both;
			}
			
			.msg-item .mui-item-clear {
				clear: both;
			}
			
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img {
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
		</style>
	</head>

	<body style="background-color: white; height: 100%;">
		<div class="mui-content" style="background-color: white; height: 95%;">
			<!--下拉刷新容器-->
			<div id="rfc-chatlst" class="mui-scroll-wrapper" style="height: 90%;">
			    <div id="dv-chat-content" class="mui-scroll">
			  		<!--
                      	作者：xuzhao_deng@sina.com
                      	时间：2016-12-22
                      	描述：聊天列表
                      -->
			    </div>
			</div>
		</div>
		<footer style="display: flex;">
			<div class="footer-left" style="margin-top: 5px;">
				<a><i id="msg-image" style="font-size: 28px;">
					<label class="ui_button ui_button_primary" for="file-upload-pic"><img src="../../img/hall/xiangji_03.png" style="margin-top: 0px;" /></label>
					<form enctype="multipart/form-data"><input type="file" id="file-upload-pic" style="position:absolute;clip:rect(0 0 0 0);"></form>
				</i></a>
			</div>
			<div class="footer-center" style="margin-top: 5px; width: 85%;">
				<textarea id='msg-text' type="text" class='input-text' style="height: 40px;"></textarea>
			</div>
			<div id="sendChat" class="footer-right" style="margin-top: 10px; color: blue; display: flex;">
				<span id="msg-type" style="font-size: 22px; width: 60px; margin-top: 5px;">&nbsp;发&nbsp;送</span>
			</div>
		</footer>
	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.pullToRefresh.js"></script>
	<script src="../../js/mui.pullToRefresh.material.js"></script>
	<script src="../../js/jquery-1.8.3.min.js"></script>
	<script src="../../js/utils/http.utils.js"></script>
	<script src="../../js/bus/pubfun.js"></script>
	<script>
		var $wxfwid = localStorage.getItem("wxfwid");
		var $currUrl = window.location.href;
		//var $currZJUid = fun_getUrlForParams(window.location.href, 1);
		var $currZJUid = getQueryString(window.location.search, "zjuid");
		//(($currUrl.split("?")[1] + "").split("&")[0] + "").split("=")[1];
		var $currZjName = decodeURI(getQueryString(decodeURI(window.location.search), "zjname"));
		//decodeURI($currUrl.split("?")[1].split("&")[1].split("=")[1] + "");
		var $currLoginUser = JSON.parse(localStorage.getItem("login-user-parent"));
		var $page = 0;
		mui.init({
			pullRefresh : {
			    container:"#rfc-chatlst",
			    down : {
			      height:50,
			      auto: true,
			      contentdown : "下拉可以刷新",
			      contentover : "释放立即刷新",
			      contentrefresh : "正在刷新...",
			      callback :fun_loadRfcChat 
			    }
			}
		});
		
		function fun_loadRfcChat() {
		    fun_loadChatLst($pageChatSzie, $page);
		    mui('#rfc-chatlst').pullRefresh().endPulldownToRefresh();
		}
		
		window.onload = function(){
			document.title = $currZjName;
		}
		
		$("#msg-text").bind("click",function(e){
		    var $this = $(this);
		    e.preventDefault();
		    setTimeout(function(){
		        $(window).scrollTop($this.offset().top - 10);
		    },200)
		});
		 
		function fun_loadChatLst($pChatSzie, $cpage){
			mui.ajax({
				url : $request_url.getChatList,
				type : "get",
				dataType : "json",
				headers: {
					"Authorization": $headers_authorization
				},
				data : {
					orgId : $wxfwid,
					userId : $currLoginUser.userId,
					expertid : $currZJUid,
					startTime : "2016-12-01 00:00:00",
					endTime : "2017-12-01 00:00:00",
					rows : $pChatSzie,
					page : $cpage
				},
				success : function(dat){
					if(dat.code == 0){
						var $chatConDoc = document.getElementById("dv-chat-content");
						var $chatRec = dat.result;
						if($chatRec != null && $chatRec.length > 0){
							for (var i = 0; i < $chatRec.length; i ++) {
								var $crdvi = document.createElement('div');
								$crdvi.innerHTML = fun_loadChatRecTem($chatRec[i], i);
								//$chatConDoc.prependTo($crdvi);
								$chatConDoc.insertBefore($crdvi, $chatConDoc.childNodes[0]);
							}
							$page ++;
						}
					} else {
						
					}
				}, error : function(err){
					mui.toast(".......")
				}
			});
		}
		
		function fun_loadChatRecTem($chat, $num){
			var $chatRecTem;
			if($chat.sender.userId == $currZJUid){
				$chatRecTem = 
					'<div class="msg-item " msg-type="'+ $chat.msgType +'">'
				+		'<img class="msg-user-img" src="'+ $chat.sender.faceImage +'" alt="" style="-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;">'
				+		'<div>'
				+			'<div class="sender-name"></div>'
				+			'<div class="msg-content">'
				+				'<div class="msg-content-inner">'+ $chat.message +'</div>'
				+				'<div class="msg-content-arrow"></div>'
				+			'</div>'
				+			'<div class="mui-item-clear"></div>'
				+		'</div>'
				+	'</div>';
			} else {
				$chatRecTem = 
					'<div class="msg-item  msg-item-self" msg-type="'+ $chat.msgType +'">'
				+		'<img class="msg-user msg-user-img" src="'+ $chat.sender.faceImage +'" style="-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;">'
				+		'<div class="msg-content">'
				+			'<div class="msg-content-inner">'+ $chat.message +'</div>'
				+			'<div class="msg-content-arrow"></div>'
				+		'</div>'
				+		'<div class="mui-item-clear"></div>'
				+	'</div>';
			}
			return $chatRecTem;
		}
		
		function fun_addChatRecTem($cmessage, $ctype, $cicon){
			var $acrhtml = 
			'<div class="msg-item  msg-item-self" msg-type="'+ $ctype +'">'
			+		'<img class="msg-user msg-user-img" src="'+ $cicon +'" style="-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;">'
			+		'<div class="msg-content">'
			+			'<div class="msg-content-inner">'+ $cmessage +'</div>'
			+			'<div class="msg-content-arrow"></div>'
			+		'</div>'
			+		'<div class="mui-item-clear"></div>'
			+	'</div>';
			return $acrhtml;
		}
		
		//发送聊天内容
		document.getElementById("sendChat").addEventListener("tap", function(){
			var $currLoginUid = $currLoginUser.userId;
			if($currLoginUid == null || $currLoginUid == ""){
				mui.toast("非登录用户不能发送");
				return;
			}
			var $chatTxt = document.getElementById("msg-text").value;
			if($chatTxt == null || $chatTxt == ""){
				mui.toast("请输入聊天内容")
				return;
			}
			var $currLoginIcon = $currLoginUser.faceImage;
			if($currLoginIcon == null || $currLoginIcon == ""){
				$currLoginIcon = "../../img/hall/bajie.png";
			}
			mui.ajax({
				url : $request_url.addChatRec,
				type : "post",
				dataType : "json",
				headers: { 
					"Authorization": $headers_authorization
				},
				data : {
					sender : $currLoginUid,
					receiver : $currZJUid,
					msgType : "text",
					message : $chatTxt
				},
				success : function(dat){
					if(dat.code == 0){
						var $crdoc = document.createElement('div');
						var $crhtml = fun_addChatRecTem($chatTxt, "text", $currLoginIcon);
						$crdoc.innerHTML = $crhtml;
						document.getElementById("dv-chat-content").appendChild($crdoc);
						document.getElementById("msg-text").value = "";
					} else {
						mui.toast(dat.message);
					}
				}, error : function(err){
					mui.toast(".......");
				}
			});
		});
	</script>

</html>